<template>
  <div>
    <div @click="onClick">
      <slot></slot>
    </div>
    <div class="addressselectbox" v-if="isShow">
      <div class="before" @click="close"></div>
      <div class="body">
        <div class="close" @click="close">关闭</div>
        <div class="title">选择地区</div>
        <div class="selectTab">
          <div v-for="(item,index) in tabs" :key="index" @click="onTabTap(index)" :class="index==tabsIndex?'active':''">
          {{(selectAreas[index] && selectAreas[index].area_name) ? selectAreas[index].area_name : '请选择'}}
          </div>
        </div>
        <div class="selectArea">
          <div v-for="(tabItem,index) in tabs" :key="index">
            <div v-if="tabsIndex==index">
              <div
                v-for="(item,index) in tabItem"
                :key="index"
                @click="onClickArea(item,index)"
              >{{item.area_name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Mall from '@/dll/mall'

  export default {
    name: 'areaSelect',
    props: {
      areaHistory: {
        type: Array,
        value: []
      }
    },
    data () {
      return {
        isShow: false,
        tabs: [],
        tabsIndex: 0,
        selectAreas: this.areaHistory
      }
    },
    methods: {
      onClick () {
        this.tabs = []
        this.isShow = true
        this.tabsIndex = 0
        this.onMask()
        this.getAreaList()
      },
      close () {
        this.isShow = false
        this.closeMask()
      },
      onTabTap (index) {
        this.tabsIndex = index
      },
      onClickArea (item, index) {
        if (!this.selectAreas[this.tabsIndex] || this.selectAreas[this.tabsIndex].area_id != item.area_id) {
          for (var i = this.tabsIndex + 1, len = this.selectAreas.length; i < len; i++) {
            delete this.selectAreas[i]
            delete this.tabs[i]
          }
        }
        this.selectAreas[this.tabsIndex] = item
        this.tabsIndex++
        this.getAreaList(item.area_id)
        document.getElementsByClassName('selectArea')[0].scrollTop = 0
      },
      async getAreaList (area_id = 0) {
        let tabs = this.tabs
        let param = { area_id: area_id }
        this.$vux.loading.show({ text: '数据加载中...' })
        let res = await Mall.getAreaList(param)
        this.$vux.loading.hide()
        if (res.code == 0 && res.data.length) {
          tabs[this.tabsIndex] = res.data
          this.tabs = []
          for (var j in tabs) {
            this.tabs.push(tabs[j])
          }
        } else {
          let area_codes = []
          let area_names = []
          for (var i in this.selectAreas) {
            area_codes.push(this.selectAreas[i].area_id)
            area_names.push(this.selectAreas[i].area_name)
          }
          let area_code = area_codes.join('_')
          let area_name = area_names.join(' ')
          let res = {
            areaCode: area_code,
            areaName: area_name,
            areaList: this.selectAreas
          }
          localStorage.localSelectArea = JSON.stringify(res)
          this.$emit('change', res)
          this.close()
        }
      },

      onMask () {
        document.body.style.position = 'fixed'
        document.body.style.top = '0'
        document.body.style.bottom = '0'
        document.body.style.left = '0'
        document.body.style.right = '0'

        // let availWidth = window.screen.availWidth
        this.$nextTick(function () {
          // document.getElementsByClassName('body')[0].style.width = `${availWidth}px`
          // eslint-disable-next-line no-unused-expressions
          document.getElementsByClassName('screenItem-popup').length ? document.getElementsByClassName('screenItem-popup')[0].style.overflow = null : ''
        })
      },
      closeMask () {
        document.body.style.position = 'static'
        this.$nextTick(function () {
          // eslint-disable-next-line no-unused-expressions
          document.getElementsByClassName('screenItem-popup').length ? document.getElementsByClassName('screenItem-popup')[0].style.overflow = 'auto' : ''
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .addressselectbox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: block;
  }

  .addressselectbox .before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: rgba(45, 45, 45, 0.5);
  }

  .addressselectbox .body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 50%;
    height: 50%;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1000;
  }

  .addressselectbox .body .close {
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    position: absolute;
    top: 0;
    right: 15px;
  }

  .addressselectbox .body .title {
    border-bottom: 1px solid #f5f5f5;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }

  .addressselectbox .body .selectTab {
    display: flex;
    height: 40px;
    line-height: 40px;
    flex-wrap: nowrap;
    overflow: auto;
    border-bottom: 1px solid #f5f5f5;
  }

  .addressselectbox .body .selectTab > .active {
    color: #b0290f;
  }

  .addressselectbox .body .selectTab > div {
    margin-left: 15px;
  }

  .addressselectbox .body .selectArea {
    flex: 1;
    line-height: 40px;
    font-size: 14px;
    overflow: auto;
  }

  .addressselectbox .body .selectArea > div {
    padding: 0 15px;
  }

  .addressselectbox .body .selectArea .active {
    color: #b0290f;
  }
</style>
